import './App.scss'
import './App.css';
import 'antd/dist/antd.css';
import {HashRouter, Route, Redirect} from 'react-router-dom'
import TopNav from './components/TopNav/TopNav'
import Home from './views/Home'
import FotterBox from './components/FotterBox/FotterBox';
import CacheRoute, { CacheSwitch } from 'react-router-cache-route'
import CodeLogin from './components/LoginPopCard/CodeLogin';
import { connect } from 'react-redux'

function  getAllClickData(props,e){
  console.log('open', props.isOpenLoginCard)
  let str = e.target.className
  if(/needLogin/.test(str)){
    console.log('打开登录')
    props.showOpenLoginCard()
    e.stopPropagation()
  }
}
function App(props) {
  return (
    <div className="App" onClickCapture={e => getAllClickData(props, e)}>
      <HashRouter>
        <TopNav />
        <CacheSwitch>
          {/* 首页 */}
          <Route exact path="/">
            <Redirect to="/discover" />
          </Route>
          {/* 首页 */}
          <CacheRoute path="/discover" component={Home}  when="always"></CacheRoute>
        </CacheSwitch>
        <FotterBox />
      </HashRouter>
      {
        props.isOpenLoginCard&&<CodeLogin />
      }
    </div>
  );
}
function mapStateToProps(state) {
  return {
    isOpenLoginCard: state.isOpenLoginCard
  }
}
function mapDispatchToProps (dispatch) {
  return {
    showOpenLoginCard () {
      dispatch({
        type: 'OPENLOGINCARD'
      })
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
